// 新版本18有client，旧版本无client
// import ReactDOM from 'react-dom';
// import React from 'react';

// 使用自定义react
import React from './react'
import ReactDOM from './react-dom';

// 新版本react18的写法
// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(<div>hello simple react</div>);

// 旧版本18以前的写法

// function MyFuctionComponent(props) {
//     return <div style={{color: 'red'}}><span>child 1</span>hello simple react</div>;
// }

// ReactDOM.render(<div style={{color: 'red'}}>hello simple react</div>, document.getElementById('root'));

class MyClassComponent extends React.Component {
    counter = 0
    constructor(props) {
        super(props);
        this.state = { count: this.counter + ''};
    }
    updateShowText(newCount) {
        this.setState({ count: newCount + '' });
    }
    render() {
        return <div style={{ color: 'red' }} onClick={() => this.updateShowText(++this.counter + '')}>
            hello simple react
            <span>{this.state.count}</span>
        </div>;
    }
}

ReactDOM.render(<MyClassComponent xx="child1" />, document.getElementById('root'));
